<template>
	<u-popup z-index="99999999" @close="close" v-model="value" :popup="false" :mask-custom-style="{ background: 'rgba(0, 0, 0, .5)' }" border-radius="28" :safe-area-inset-bottom="true" mode="center">
		<view class="popup-content">
			<image class="popup-content-close" src="@/static/images/payment/payment-close.png" mode="scaleToFill" @tap.stop="close()"></image>
			<view class="popup-content-title"><text class="popup-content-title-text">上传头像</text></view>
			<view class="popup-content-desc"><text class="popup-content-desc-text">没有头像，让我如何展示你的好</text></view>
			<view class="popup-content-action" @tap.stop="chooseImage">
				<image v-if="!tempFilePath" class="popup-content-action-background" :src="`${staticFileDomain}/static/image/face-upload-area.png`"></image>
				<image v-else class="popup-content-action-image" :src="tempFilePath" mode="aspectFit"></image>
			</view>
			<view class="popup-content-tip"><text class="popup-content-tip-text">添加本人头像，完善资料，更多异性能看到你</text></view>
			<view class="popup-content-demo" v-if="showAll">
				<image class="popup-content-demo-item" :src="`${staticFileDomain}/static/image/face-disable-1.png`"></image>
				<image class="popup-content-demo-item" :src="`${staticFileDomain}/static/image/face-disable-2.png`"></image>
				<image class="popup-content-demo-item" :src="`${staticFileDomain}/static/image/face-disable-3.png`"></image>
			</view>
			<image class="popup-content-btn" :class="{ disable: !this.dataRes.source }" @tap.stop="uploadFace" :src="`${staticFileDomain}/static/image/face-upload-btn.png`" mode="aspectFit"></image>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: {
		value: {
			default: false,
			type: Boolean
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// #ifdef MP
		const height = systemInfo.windowHeight;
		// #endif
		// #ifdef H5
		const height = systemInfo.screenHeight;
		// #endif
		this.showAll = height > uni.upx2px(994) + 20;
		uni.$on('croperComplete', this.croperComplete);
	},
	beforeDestroy() {
		uni.$off('croperComplete', this.croperComplete);
	},
	data() {
		return {
			tempFilePath: '',
			dataRes: {},
			showAll: true
		};
	},
	methods: {
		close() {
			this.$emit('input', false);
		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				success: res => {
					this.navigateTo({
						url:
							'/pageSupport/supplement/cropper' +
							this.$u.queryParams({
								imagePath: res.tempFilePaths[0],
								viewToken: this.viewToken,
								aspectRatio: 1,
								initialBoxWidthRatio: 1,
								minBoxWidthRatio: 0.5
							})
					});
				}
			});
		},
		croperComplete(data) {
			if (data.fromToken === this.viewToken) {
				const dataRes = data.res;
				this.tempFilePath = dataRes.path;
				this.dataRes = dataRes;
			}
		},
		uploadFace() {
			if (this.dataRes.source) {
				uni.showLoading({
					title: '上传中...'
				});
				this.$u.api
					.uploadImage(this.dataRes.source, { param: JSON.stringify(this.dataRes.param) })
					.then(res => {
						this.$u.api
							.saveUserBasic({ avatar_id: res.data.file_id })
							.then(res => {
								this.refreshUserInfo();
							})
							.catch(e => {
								uni.hideLoading();
							});
					})
					.catch(e => {
						uni.hideLoading();
					});
			} else {
				uni.showToast({
					icon: 'none',
					title: '请选择图片'
				});
			}
		},
		completeUserInfo(data) {
			this.close();
			uni.hideLoading();
		}
	}
};
</script>

<style lang="scss">
.popup-content {
	width: 670rpx;
	background-color: #ffffff;
	border-radius: 40rpx;
	align-items: center;
	padding: 40rpx 0 72rpx;
	display: flex;
	flex-direction: column;
}
.popup-content-close{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}
.popup-content-title {
	height: 46rpx;
	align-items: center;
}
.popup-content-title-text {
	color: #6d7278;
	font-weight: 700;
	font-size: 40rpx;
}
.popup-content-desc {
	height: 28rpx;
	font-weight: normal;
	align-items: center;
	margin-top: 20rpx;
}

.popup-content-desc-text {
	font-size: 24rpx;
	color: #979797;
}

.popup-content-action {
	width: 540rpx;
	height: 340rpx;
	margin-top: 20rpx;
	align-items: center;
	justify-content: center;
	display: flex;
}
.popup-content-action-background {
	width: 540rpx;
	height: 340rpx;
	border-radius: 20rpx;
}

.popup-content-action-image {
	width: 340rpx;
	height: 340rpx;
	background-color: #f1f5f8;
}
.popup-content-tip {
	width: 489rpx;
	height: 80rpx;
	margin-top: 20rpx;
}
.popup-content-tip-text {
	line-height: 40rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #979797;
}
.popup-content-demo {
	height: 166rpx;
	margin-top: 20rpx;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 538rpx;
	display: flex;
}
.popup-content-demo-item {
	width: 166rpx;
	height: 166rpx;
}
.popup-content-btn {
	width: 400rpx;
	height: 80rpx;
	/* background-image: linear-gradient(90deg, #ed4f5d, #fb7a8e); */
	border-radius: 40rpx;
	margin-top: 70rpx;
}
.disable {
	opacity: 0.5;
}
</style>
